<template>
<div class="ranking">
    <div class="card bgOrange">
        <div class="label bgOrange1">最佳学生</div>
        <dl>
            <dt>
                <VanImage
                round
                width="0.9rem"
                height="0.9rem"
                :src="bestStudent.bestStudentImgUrl"
                />
            </dt>
            <dd>
                <div class="name">{{bestStudent.bestStudentName}}</div>
                <div class="score">
                    本周得分
                    <span class="colorOrange">{{bestStudent.bestStudentScore}}</span>
                    分
                </div>
            </dd>
        </dl>
    </div>
    <div class="card bgBlue">
        <div class="label bgBlue1">进步最快</div>  
        <dl>
            <dt>
                <VanImage
                round
                width="0.9rem"
                height="0.9rem"
                :src="headwayStudent.headwayStudentImgUrl"
                />
            </dt>
            <dd>
                <div class="name">{{headwayStudent.headwayStudentName}}</div>
                <div class="score">
                    得分增长
                    <span class="colorBlue">{{headwayStudent.headwayStudentScore}}</span>
                    分
                </div>
            </dd>
        </dl>
    </div>
</div>
</template>

<script>
import { Image as VanImage } from 'vant';
export default {
    name:'ranking',
    components:{
        VanImage
    },
    props:['bestStudent','headwayStudent']
}
</script>

<style lang="less" scoped>
.colorRed{
    color:#FF0000;
}
.colorBlue{
    color: #128FEF;
}
.colorOrange{
    color:#ff9900;
}
.bgOrange{
    background-color: #fff4e2;
}
.bgBlue{
    background-color: #e7f4fd;
}
.bgOrange1{
    background-color: #ff9900;
}
.bgBlue1{
    background-color: #128FEF;
}
.ranking{
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 0.13rem 0.26rem;
    display: flex;
    .card{
        height: 1.5rem;
        flex: 1;
        position: relative;
        box-sizing:border-box;
        padding:0.26rem 0.18rem;
        margin:0 0.13rem;
        .label{
            position: absolute;
            top:0;
            right:0;
            color:#fff;
            font-size:0.2rem;
            padding: 0.04rem 0.1rem;
            border-bottom-left-radius: 0.15rem;
        }
        dl{
            display: flex;
            dt{
                width:0.9rem;
                height:0.9rem;;
            }
            dd{
                flex: 1;
                margin-left:0.16rem;
                .name{
                    font-size: 0.26rem;
                    color:#000;
                    margin-top: 0.15rem;
                    height: 0.34rem;
                }
                .score{
                    font-size:0.2rem;
                    color:#444;
                    span{
                        font-size:0.3rem;
                        padding:0 0.01rem;
                    }
                }
            }
        }
    }
}
</style>




